<template>
  <!-- <a-descriptions title="生活方式" bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
    <a-descriptions-item label="运动" :span="2" v-if="report.sport">
      {{ report.sport }}
    </a-descriptions-item>
    <a-descriptions-item label="饮酒" :span="2" v-if="report.wine">
      {{ report.wine }}
    </a-descriptions-item>
    <a-descriptions-item label="吸烟" :span="2" v-if="report.smoke">
      {{ report.smoke }}
    </a-descriptions-item>
    <a-descriptions-item label="睡眠" :span="2" v-if="report.sleep">
      {{ report.sleep }}
    </a-descriptions-item>
  </a-descriptions> -->
  <div class="container">
    <div style="">
      <div class="card_title">
        <img src="~@/assets/report/first/dangan.png" />
        <span>患者档案</span>
      </div>
      <div class="card_nd_title">
        <span>生活方式</span>
        <div class="line" style="width:64px;"></div>
      </div>
      <div class="card_content">
        <div class="content">
          <div>
            <img src="~@/assets/report/first/yinshi.png" />
            <span class="title">饮食</span>
            <span>评分：{{ report.diet.score || 0 }}分</span>
          </div>
          <p>小结：{{ report.diet.comment || '无' }}</p>
        </div>
        <div class="content">
          <div>
            <img src="~@/assets/report/first/yinjiu.png" />
            <span class="title">饮酒</span>
            <span>评分：{{ report.wine.score || 0 }}分</span>
          </div>
          <p>小结：{{ report.wine.comment || '无' }}</p>
        </div>
        <div class="content">
          <div>
            <img src="~@/assets/report/first/xiyan.png" />
            <span class="title">吸烟</span>
            <span>评分：{{ report.smoke.score || 0 }}分</span>
          </div>
          <p>小结：{{ report.smoke.comment || '无' }}</p>
        </div>
        <div class="content">
          <div>
            <img src="~@/assets/report/first/shuimian.png" />
            <span class="title">睡眠</span>
            <span>评分：{{ report.sleep.score || 0 }}分</span>
          </div>
          <p>小结：{{ report.sleep.comment || '无' }}</p>
        </div>
        <div class="content">
          <div>
            <img src="~@/assets/report/first/yundong.png" />
            <span class="title">运动</span>
            <span>评分：{{ report.sport.score || 0 }}分</span>
          </div>
          <p>小结：{{ report.sport.comment || '无' }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LifeStyle',
  props: ['report'],
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }
@media print {
  .container {
    page-break-after: always;
  }
}
.container {
  padding: 40px 24px 0 24px;
}
.card_title {
  display: flex;
  align-items: center;
  img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
  span {
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }
}
.card_nd_title {
  margin-top: 40px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.content {
  div {
    display: flex;
    align-items: center;
    margin-top: 30px;
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 0;
      margin-right: 50px;
    }
    img {
      width: 25px;
      height: 25px;
      margin-right: 10px;
    }
  }
  p {
    margin-top: 10px;
  }
}
</style>

